<template>
  <div id="selfRoleDeptPermission"
       class="selfRoleDeptPermissionModal">
    <div class="data-top">
      <el-radio-group v-model="deptPermission">
        <el-radio label="1"
                  class="eachRadio">
          <span class="eachName">全部分销机构</span>
          <span class="data-ps"><i class="fa fa-exclamation-circle warning-icon"></i>该方式，将有全部分销机构的权限</span>
        </el-radio>
        <!-- <el-radio label="2" class="eachRadio">
          <span class="eachName">本部门角色的分销机构权限集合</span>
          <span class="data-ps"><i class="fa fa-exclamation-circle warning-icon"></i>该方式，将复用本部门角色的分销机构权限集合</span>
        </el-radio> -->
        <el-radio label="0"
                  class="eachRadio">
          <span class="eachName">选择指定分销机构权限</span>
          <span class="data-ps"><i class="fa fa-exclamation-circle warning-icon"></i>该方式，将设置指定的的分销机构权限</span>
        </el-radio>
      </el-radio-group>
    </div>
    <div class="data-down">
      <div class="data-down-detail">
        <div class="data-down-mask"
             v-if="deptPermission!='0'"></div>
        <div class="select-ord">
          <div class="org-left">
            <a class="select-all"
               @click="selectAll(true)">全部选择</a><a class="select-all"
               @click="selectAll(false)">全部取消</a>
          </div>
          <div class="org-right">
            <Input placeholder="机构名称"
                   style="width: 150px"
                   v-model="searchText" />
            <button type="button"
                    class="btn checkedBtn surBtn"
                    @click="searchOrgList">查询</button>
          </div>
          <div class="clear"></div>
        </div>
        <div class="data-select">
          <ul>
            <li class="data-f1"
                v-for="(rc,index) in orgDataList"
                v-if="rc.name !=='ALL' && rc.other !== 'other'">
              <div class="data-detail">
                <div class="data-checkbox">
                  <Checkbox size="small"
                            v-model="rc.selected"
                            @on-change="(v)=>{checkOnChange(rc,v)}"></Checkbox>
                </div>
                <div class="data-detail-f1">
                  <Icon size="16"
                        color="#ff5e5e"
                        v-if="rc.children && rc.children.length > 0 &&rc.show"
                        @click="()=>{rc.show = rc.show==true?false:true;$forceUpdate()}"
                        type="md-remove-circle" />
                  <Icon size="16"
                        color="#ff5e5e"
                        v-if="rc.children && rc.children.length > 0 &&!rc.show"
                        @click="()=>{rc.show = rc.show==true?false:true;$forceUpdate()}"
                        type="md-add-circle" />
                  {{rc.name}}
                </div>
                <div class="clearfix"
                     v-bind:class="{  'background-data': index%2==0 }"></div>
              </div>

              <ul v-if="rc.children && rc.children.length > 0"
                  v-show="rc.show">
                <li class="data-f2"
                    v-for="(rc2,index) in rc.children">
                  <div class="data-detail">
                    <div class="data-checkbox">
                      <Checkbox size="small"
                                v-model="rc2.selected"
                                @on-change="(v)=>{checkOnChange(rc2,v)}"></Checkbox>
                    </div>
                    <div class="data-detail-f2">
                      <Icon size="16"
                            color="#ff5e5e"
                            v-if="rc2.children && rc2.children.length > 0 &&rc2.show"
                            @click="()=>{rc2.show = rc2.show==true?false:true;$forceUpdate()}"
                            type="md-remove-circle" />
                      <Icon size="16"
                            color="#ff5e5e"
                            v-if="rc2.children && rc2.children.length > 0 &&!rc2.show"
                            @click="()=>{rc2.show = rc2.show==true?false:true;$forceUpdate()}"
                            type="md-add-circle" />
                      {{rc2.name}}
                    </div>
                    <div class="clearfix"
                         v-bind:class="{'background-data': index%2==0 }"></div>
                  </div>
                  <ul v-if="rc2.children && rc2.children.length > 0"
                      v-show="rc2.show">
                    <li class="data-f2"
                        v-for="(rc3,index) in rc2.children">
                      <div class="data-detail">
                        <div class="data-checkbox">
                          <Checkbox size="small"
                                    v-model="rc3.selected"></Checkbox>
                        </div>
                        <div class="data-detail-f3">{{rc3.name}}</div>
                        <div class="clearfix"></div>
                      </div>
                    </li>
                    <div class="clearfix"
                         v-bind:class="{  'background-data': index%2==0 }"></div>
                  </ul>
                </li>
                <div class="clearfix"></div>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button"
              class="btn checkedBtn surBtn"
              @click="confirmData">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "selfRoleDeptPermission",
  data() {
    return {
      checkedAllOrg: false,
      checkOrg: true,
      checkDetail: false,
      dataArea: "",
      selectArray: [],
      deptPermission: "",
      orgDataList: [],
      searchText: "",
      props: {
        stripe: true,
        border: false,
        showHeader: false,
        showSummary: false,
        showRowHover: true,
        showIndex: false,
        treeType: true,
        isFold: true,
        expandType: false,
        selectionType: true
      },
      columns: [
        {
          title: "",
          key: "name",
          width: "400px"
        }
      ]
    };
  },
  mounted() {},
  methods: {
    selectAll(checked) {
      this.setChildren(this.roleData.roleCaseMembers, checked);
    },
    setChildren(children, checked) {
      for (let i = 0; i < children.length; i++) {
        children[i].selected = checked;
        if (children[i].children) {
          this.setChildren(children[i].children, checked);
        }
      }
    },
    setParams(children) {
      children.forEach((item, index) => {
        if (item.selected) {
          this.selectArray.push(item.id);
        }
        if (item.children) {
          this.setParams(item.children);
        }
      });
    },
    checkOnChange(item, flag) {
      item.selected = flag;
      if (item.children) {
        this.setChildren(item.children, flag);
      }
    },
    confirmData() {
      var _self = this;
      _self.selectArray = [];
      _self.orgDataList.forEach((item, index) => {
        _self.deleteShow(item);
      });
      let parmas = {
        deptPermission: _self.deptPermission,
        roleCaseMembers: _self.orgDataList,
        selected: []
      };
      if (_self.checkOrg) {
        parmas.deptPermission = _self.deptPermission;
      } else {
        parmas.deptPermission = 0;
      }
      //获取选中的组织
      _self.setParams(_self.orgDataList);
      if (_self.deptPermission === "0") {
        parmas.selected = _self.selectArray;
      } else {
        parmas.selected = [];
      }
      var params = {
        merchantId: "",
        roleId: _self.$store.getters.selectRoleInfo.roleId,
        roleCaseMemberDto: parmas
      };
      var body = {};
      body.params = params;
      _self.btnShow = false;
      var url = _self.utilHelper.apiUrl + "/api/dp/setRoleCaseMember";
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        if (body.result == "1") {
          layer.msg(
            "授权成功!",
            {
              time: 1000
            },
            function () {
              _self.btnShow = true;
              _self.$emit("closeSelfRoleAuthModal");
            }
          );
        } else {
          layer.alert("系统异常!");
          _self.btnShow = true;
        }
      });
    },
    setDataShow(roleData) {
      this.roleData = roleData;
      this.orgDataList = this.roleData.roleCaseMembers;
      this.deptPermission =
        this.roleData.deptPermission == "0" &&
        this.roleData.roleCaseMembers[0].name === "ALL"
          ? "1"
          : this.roleData.deptPermission;
    },
    setShow(children) {
      children.show = false;
      if (typeof children.children != "undefined") {
        children.children.forEach((item, index) => {
          this.setShow(children.children);
        });
      }
    },
    deleteShow(children) {
      delete children.show;
      if (typeof children.children != "undefined") {
        children.children.forEach((item, index) => {
          this.setShow(children.children);
        });
      }
    },
    toggle(show) {
      if (typeof show == "undefined") {
        show = true;
      }
      show = !show;
    },
    searchOrgList() {
      this.orgDataList = [];
      if (!this.searchText) {
        this.orgDataList = this.roleData.roleCaseMembers;
        return;
      }
      this.roleData.roleCaseMembers.forEach((item, index) => {
        if (item.name.search(this.searchText) != -1) {
          let data = {
            id: item.id,
            merchantId: item.merchantId,
            name: item.name,
            other: item.other,
            pId: item.pId,
            selected: item.selected
          };
          this.orgDataList.push(data);
        }
        if (typeof item.children != "undefined") {
          this.searchChildren(this.searchText, item.children);
        }
      });
    },
    searchChildren(text, children) {
      if (typeof children != "undefined") {
        children.forEach((item, index) => {
          let data = {
            id: item.id,
            merchantId: item.merchantId,
            name: item.name,
            other: item.other,
            pId: item.pId,
            selected: item.selected
          };

          if (data.name.search(text) != -1) {
            this.orgDataList.push(data);
          }
          if (typeof item.children != "undefined") {
            // data.children = item.children;
            this.searchChildren(text, item.children);
          }
        });
      }
    }
  }
};
</script>
<style>
.eachRadio .el-radio__input.is-checked + .el-radio__label {
  color: #606266;
}
.eachRadio .el-radio__input.is-checked .el-radio__inner {
  background: #f87242;
  border-color: #f87242;
}
</style>
<style scoped>
.selfRoleDeptPermissionModal {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.eachRadio {
  display: block;
  height: 30px;
  line-height: 30px;
}
.eachName {
  display: inline-block;
  width: 240px;
  font-weight: 600;
}
.data-top {
  margin: 0px 10px;
}
.data-down {
  margin: 10px;
  flex: 1;
  overflow: hidden;
  position: relative;
}
.warning-icon {
  font-size: 16px;
  color: #ff5e5e;
  margin-right: 5px;
}
.select-all {
  color: #f87242;
  margin: 0 5px;
}
.org-left {
  float: left;
}
.org-right {
  float: right;
}
.select-ord {
  line-height: 36px;
  margin: 5px 0;
}
.data-down-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.2;
  background: #000;
  z-index: 100;
}
.data-down-detail {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
.data-select {
  position: absolute;
  top: 50px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: scroll;
}
.data-detail {
  border: 1px solid #ececec;
}
.data-detail-f1 {
  float: left;
  margin: 5px 15px;
}
.data-detail-f2 {
  float: left;
  margin: 5px 40px;
}
.data-detail-f3 {
  float: left;
  margin: 5px 65px;
}
.data-checkbox {
  float: left;
}
.background-data {
  background: #e8eaec;
}
.data-ps {
  color: #999;
}
.checkAll-org {
  margin-left: 20px;
  font-size: 12px;
}
</style>